<template>
  <div>
    <el-dialog
      :model-value="dialogAsync"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :center="true"
      width="60%"
      @open="openDialog"
      @close="closeDialog"
    >
      <template #header>
        <div>
          <span class="dialog-title">策略详情</span>
          <span class="dialog-title-desc">注意：详情仅供查看</span>
        </div>
      </template>
      <div class="config-body">
        <component :is="components[strategyType]"></component>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { components } from "~/utils/common/strategyDetail.js";
import { ref, reactive, markRaw } from "vue";
import { useTreeStore } from "~/utils/pinia/tree.js";
import { req_serverStrategyDetail } from "~/utils/axios/index.js";
import { eventBus } from "~/utils/common/eventBus.js";
const treeStore = useTreeStore();
const props = defineProps({
  dialogAsync: {
    type: Boolean,
    default: false,
  },
  strategyType: {
    type: String,
    default: "",
  },
  strategyId: {
    type: Number,
  },
});
const currentPage = ref(0);
const openDialog = () => {
  currentPage.value = 0;
  treeStore.isShowStrategyDetail = true;
  getStrategyDetail();
};

const getStrategyDetail = async () => {
  const { data: res } = await req_serverStrategyDetail(props.strategyId, {
    page: currentPage.value,
    size: 10,
  });
  eventBus.emit("getStrategyDetail", {
    data: res.data,
    total: res.total,
    fromOs: res.fromOs,
  });
};
eventBus.on("changeStrategyDetailPage", (page) => {
  currentPage.value = page;
  getStrategyDetail();
});
const emits = defineEmits(["closeDialog"]);
const closeDialog = () => {
  emits("closeDialog", false);
  treeStore.isShowStrategyDetail = false;
};
</script>

<style lang="scss" scoped>
.dialog-title-desc {
  font-size: 12px;
  color: #8b8888;
  margin-left: 10px;
}
.config-body {
  background-color: #f4f5f9;
}
</style>
